<template>
    <div>
        <el-dialog
                id="customerDetail"
                title="客户详情"
                :visible.sync="dialogshow"
                :before-close="dialogClose"
                style="display:none;"
                top="10vh"
                width="90%"
                :fullscreen="fullscreen"
        >
            <dialog-tools
                    v-bind:back="true"
                    v-bind:next="true"
                    v-bind:goback="true"
                    v-bind:prev="true"
                    v-bind:screen="true"
                    @clickfullscreen="clickfullscreen"
            >
            </dialog-tools>

<el-tabs class="tabs-table customer-tabs" type="border-card" v-model="activeName">
		<el-tab-pane label="基本信息" name="first">
			<table style="width:100%;">
				<tr>
					<td style="width:25%">
						<div class="td-lable">客户名称:</div>
						<div class="td-info"> 某某公司</div>
					</td>
					<td style="width:25%">
						<div class="td-lable">客户代码:</div>
						<div class="td-info"> ZBD</div>
					</td>
					<td style="width:25%">
						<div class="td-lable">客户状态:</div>
						<div class="td-info"> 合作中</div>
					</td>
					<td style="width:25%">
						<div class="td-lable">客户类别:</div>
						<div class="td-info"> A类</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="td-lable">业务联系人1:</div>
						<div class="td-info">吴先生</div>
					</td>
					<td>
						<div class="td-lable">联系电话:</div>
						<div class="td-info">13113696666</div>
					</td>
					<td>
						<div class="td-lable">微信:</div>
						<div class="td-info">fasdD342</div>
					</td>
					<td>
						<div class="td-lable">邮箱:</div>
						<div class="td-info">88888@qq.com</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="td-lable">业务联系人2:</div>
						<div class="td-info">王先生</div>
					</td>
					<td>
						<div class="td-lable">联系电话:</div>
						<div class="td-info">13113696666<br>13188888888</div>
					</td>
					<td>
						<div class="td-lable">微信:</div>
						<div class="td-info">fasdD342</div>
					</td>
					<td>
						<div class="td-lable">邮箱:</div>
						<div class="td-info">88888@qq.com</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="td-lable">法人:</div>
						<div class="td-info"> 王某某</div>
					</td>
					<td>
						<div class="td-lable">法人电话:</div>
						<div class="td-info">13355888888<br>13355888888</div>
					</td>
					<td>
						<div class="td-lable">微信:</div>
						<div class="td-info"> 合作中</div>
					</td>
					<td>
						<div class="td-lable">传真:</div>
						<div class="td-info">0755-88888888</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="td-lable">客户来源:</div>
						<div class="td-info">朋友介绍</div>
					</td>
					<td>
						<div class="td-lable">客户需求:</div>
						<div class="td-info">成品</div>
					</td>
					<td colspan="2">
						<div class="td-lable">地址:</div>
						<div class="td-info">广东省深圳市龙岗区布吉街道吉华路123号</div>
					</td>
				</tr>
				<tr>
					<td colspan="4">
						<div class="td-lable">备注:</div>
						<div class="td-info">一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字</div>
					</td>
				</tr>
				
				<tr>
					<td>
						<div class="td-lable">审核状态:</div>
						<div class="td-info">已审核</div>
					</td>
					<td>
						<div class="td-lable">审核人:</div>
						<div class="td-info">王某某</div>
					</td>
					<td>
						<div class="td-lable">审核时间:</div>
						<div class="td-info">2020-01-01 23:55</div>
					</td>
					<td>
						<div class="td-lable"></div>
						<div class="td-info"></div>
					</td>
				</tr>
			</table>
		</el-tab-pane>
		<el-tab-pane label="详细信息" name="second">

			<table style="width:100%">
				<tr>
					<td style="width:25%">
						<div class="td-lable">信用等级:</div>
						<div class="td-info">A级</div>
					</td>
					<td style="width:25%">
						<div class="td-lable">授信额度:</div>
						<div class="td-info">≦10万</div>
					</td>
					<td style="width:25%">
						<div class="td-lable">对公银行:</div>
						<div class="td-info"> 建设银行</div>
					</td>
					<td style="width:25%">
						<div class="td-lable">对公银行帐号:</div>
						<div class="td-info">4621323133213213</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="td-lable">税务登记证号:</div>
						<div class="td-info">234213421353453</div>
					</td>
					<td>
						<div class="td-lable">经营面积:</div>
						<div class="td-info">13113696666</div>
					</td>
					<td>
						<div class="td-lable">注册商标:</div>
						<div class="td-info">好运来 尚品阁 </div>
					</td>
					<td>
						<div class="td-lable">授权品牌:</div>
						<div class="td-info">88888@qq.com</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="td-lable">营业执照:</div>
						<div class="td-info"><a href="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=267817157,3993463591&fm=26&gp=0.jpg"
							 target="_blank"><img style="max-height:200px;max-width:200px" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=267817157,3993463591&fm=26&gp=0.jpg" /></a></div>
					</td>
					<td>
						<div class="td-lable">其它图片:</div>
						<div class="td-info"><img style="max-height:200px;max-width:200px" scr="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=267817157,3993463591&fm=26&gp=0.jpg" /></div>
					</td>
					<td>
						<div class="td-lable">网址:</div>
						<div class="td-info"><a href="//www.baidu.com" target="_blank">//www.baidu.com</a></div>
					</td>
					<td>
						<div class="td-lable"></div>
						<div class="td-info"></div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="td-lable">创建人:</div>
						<div class="td-info">某员工</div>
					</td>
					<td>
						<div class="td-lable">创建时间:</div>
						<div class="td-info">2020-01-01 23:55</div>
					</td>
					<td>
						<div class="td-lable">修改记录:</div>
						<div class="td-info">--</div>
					</td>
					<td>
						<div class="td-lable">更新时间:</div>
						<div class="td-info">2020-01-01 23:55</div>
					</td>
				</tr>
			</table>
		</el-tab-pane>
		<el-tab-pane label="跟进记录（5）" name="third">
			<genjin-jilu></genjin-jilu>
		</el-tab-pane>
		<el-tab-pane label="订单记录（0）" name="fourth">暂无


		</el-tab-pane>
		<el-tab-pane label="收货地址" name="third2">暂无


		</el-tab-pane>
	</el-tabs>

            <div slot="footer" class="dialog-footer">
                <el-dropdown style="float:left;margin-left: 15px" >
                    <el-button>
                        关联数据<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>设计图</el-dropdown-item>
                        <el-dropdown-item>客来石</el-dropdown-item>
                        <el-dropdown-item>客来金</el-dropdown-item>
                        <el-dropdown-item>其它...</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-button type="primary" @click="handleButtons(11)">编辑</el-button>
                <el-button @click="dialogClose">关 闭</el-button>
            </div>
        </el-dialog>

        <genjin-add
                v-bind:dialogshow="dialogGenjiAdd"
                @dialog_close="dialog_close_genjin_add"
        ></genjin-add>
        <customer-edit
                v-bind:dialogshow="dialogCustomerEdit"
                @dialog_close="dialog_close_customer_edit"
        ></customer-edit>

         <!-- <caozuojilu-list
                v-bind:dialogshow="dialogCustomerEdit"
                @dialog_close="dialog_close_customer_edit"
        ></caozuojilu-list> -->
    </div>
</template>
<style scoped>
	.td-lable,
	.td-info {
		display: inline-table;
		vertical-align: -webkit-baseline-middle;
	}

	.td-lable {
		text-align: right;
		width: 100px;
	}

	.td-info {
		margin-left: 20px;
	}
	.tabs-table td {
		height: 50px;
		border-bottom: 1px solid #dcdfe6;
	}
    .customer-tabs .el-tab-pane{
	height:400px;
	overflow: auto;
	padding:20px;
	}

</style>
<script>
  module.exports = {
    methods:{
      dialogAdd(){
        this.$confirm('是否继续操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      dialogClose(){
        this.$emit('dialog_close',1)
      },
      clickfullscreen () {
        this.fullscreen = !this.fullscreen
      },
      //跟进
      dialog_close_genjin_add (val) {
        console.log(val)
        this.dialogGenjiAdd = false
      },
      //编辑
      dialog_close_customer_edit (val) {
        console.log(val)
        this.dialogCustomerEdit = false
      },
      handleButtons (val) {
        console.log(22422)
        switch (val) {
          case 1:
            this.dialogSendMessage = 'true'
            console.log(this.dialogSendMessage)
            break

          case 10:
            console.log(333)
            this.dialogGenjiAdd = 'true'
            console.log(this.dialogGenjiAdd)
            break
          case 11:
            console.log("customeredit")
            this.dialogCustomerEdit = 'true'
            console.log(this.dialogCustomerEdit)
            break
        }
      },

    },
    props: ['dialogshow'],
    data (){
      return {
        activeName:'first',
        dialogSendMessage:false,
        dialogCustomerEdit:false,
        dialogGenjiAdd:false,
        // dialogshow:false,
        Sendmssages:{
          address:'',
          customercate:'',
          cate:'',
          nickname:'',
          creditrank:'',
          name:'',
        },
        customerstaffs:[
          { typename: '员工一' },
          { typename: '员工二' },
          { typename: '员工三' },
          { typename: '员工四' },
        ],
        changeReason:[
          { typename: '原因一' },
          { typename: '原因二' },
          { typename: '原因三' },
          { typename: '原因四' },
        ],
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        customer: {
          name: '',
          customercode: '',
          customerstatus: '',
          customercate: '',
          creditrank: '',
          creditline: '',
          capital: '',
          annualsales: '',
          bank: '',
          certificateno: '',
          address: '',
          area: '',
          brand: '',
          bankaccount: '',
          trademark: '',
          website: '',
          lperson: '',
          lphone: '',
          contacts: '',

          phone: '',
          phonenum: '',
          weixin: '',
          email: '',
          fax: '',
          resource: '',
          requirement: '',
          ordercountmonth: '',
          purchaseamountmonth: '',
          ordercountyear: '',
          purchaseamountyear: '',
          customerstaffname: '',
          customerstaffcode: '',
          operator: '',
          insertime: '',
          remark: '',
        },
        crmsclientStatic: [
          { typename: 'A级' },
          { typename: 'B级' },
          { typename: 'C级' },
          { typename: 'D级' },
        ],

        scheduleType: [
          { typename: '业务拓展' },
          { typename: '订单跟进' },
          { typename: '料/款跟进' },
        ],

        cates: [
          { typename: '意向客户' },
          { typename: '老客户' },
        ],

        crmsclientRank: [
          { typename: 'A类' },
          { typename: 'B类' },
          { typename: 'C类' },
          { typename: 'D类' },
        ],
        fullscreen: false,
      }
    },
    components:{
      'dialog-tools': 'url:../tools/dialog-tools.vue',
      'genjin-jilu': 'url:../data/genjin-jilu.vue',
      'genjin-add': 'url:./genjin-add.vue',
      'customer-edit': 'url:./customer-edit.vue',
    }
  }
</script>
